<template>
  <div style="position: relative;display: inline-block;min-width:60px;margin:2px 5px">
    <div style="width: 100%;text-align: center">
      <van-image
        round
        width="32"
        height="32"
        style="margin:0 auto"
        :src="getMyAvatar()">
      </van-image>
    </div>
    <div style="text-align: center">{{ getMyTitle() }}</div>
  </div>
</template>

<script>
  const defaultAvatar = 'static/mobile/icon/user.png'
  export default {
    name: 'UserWidget',
    props:{
      avatar:{
        type:String,
        required:false,
        default:''
      },
      title:{
        type:String,
        required:false,
        default:''
      },
      textCut:{
        type:Boolean,
        required:false,
        default:false
      },
      maxLen:{
        type:Number,
        required:false,
        default:4
      }

    },
    data(){
      return {

      }
    },
    methods:{
      getMyAvatar(){
        if(!this.avatar){
          return defaultAvatar
        }
        return this.avatar
      },
      getMyTitle(){
        if(!this.title){
          return ''
        }
        if(this.textCut){
          if(this.title.length>this.maxLen){
            return this.title.substr(0,this.maxLen)
          }
        }
        return this.title
      }
    }
  }
</script>

<style scoped>

</style>